<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侃侃岛 - 登录</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <!-- 主窗口区 -->
    <div class="login-container">
        <div class="login-header">
            <h1>侃侃岛</h1>
            <p>请选择您的登录方式</p>
        </div>

        <div class="login-tabs">
            <div class="login-tab active" data-tab="username">用户名登录</div>
            <div class="login-tab" data-tab="email">邮箱登录</div>
        </div>

        <div class="login-content">
            <!-- 用户名密码登录表单 -->
            <form id="username-form" class="login-form active">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" class="form-control" placeholder="请输入用户名" required>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
                </div>

                <div class="remember-forgot">
                    <div class="remember-me">
                        <input type="checkbox" id="remember">
                        <label for="remember">记住我</label>
                    </div>
                    <a href="#" class="forgot-password">忘记密码?</a>
                </div>

                <button type="submit" class="login-btn">登 录</button>
            </form>

            <!-- 邮箱验证码登录表单 -->
            <form id="email-form" class="login-form">
                <div class="form-group">
                    <label for="email">邮箱地址</label>
                    <input type="email" id="email" class="form-control" placeholder="请输入邮箱地址" required>
                </div>

                <div class="form-group">
                    <label for="verification-code">验证码</label>
                    <div class="input-with-button">
                        <input type="text" id="verification-code" class="form-control" placeholder="请输入验证码" required>
                        <button type="button" id="send-code-btn" class="send-code-btn">发送验证码</button>
                    </div>
                </div>

                <button type="submit" class="login-btn">登 录</button>
            </form>

            <div class="register-link">
                还没有账号? <a href="register.html">立即注册</a>
            </div>
        </div>
    </div>
    <!-- 通知 -->
    <div class="set-notification" id="set-notification">
        <i class="fas fa-check-circle"></i> <span id="set-notificationText"></span>
    </div>
    <!-- 引入 jquery -->
    <script src="js/jquery.min.js"></script>

    <script>
        // 页面加载时执行
        window.onload = function() {
            document.body.style.zoom = "90%";
        };
    </script>
    <!-- 实现前后端交互的逻辑 -->
    <script>
        // 获取DOM元素
        const tabs = document.querySelectorAll('.login-tab');
        const forms = document.querySelectorAll('.login-form');
        const sendCodeBtn = document.getElementById('send-code-btn');

        // 切换登录方式
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有active类
                tabs.forEach(t => t.classList.remove('active'));
                forms.forEach(f => f.classList.remove('active'));

                // 添加active类到当前标签和表单
                tab.classList.add('active');
                const formId = `${tab.dataset.tab}-form`;
                document.getElementById(formId).classList.add('active');
            });
        });

        // 发送验证码功能
        sendCodeBtn.addEventListener('click', () => {
            const emailInput = document.getElementById('email');
            const email = emailInput.value.trim();

            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                setShowNotification('请输入有效的邮箱地址');
                return;
            }

            // 禁用按钮并开始倒计时
            sendCodeBtn.disabled = true;
            sendCodeBtn.textContent = '60秒后重发';

            let countdown = 60;
            const timer = setInterval(() => {
                countdown--;
                sendCodeBtn.textContent = `${countdown}秒后重发`;

                if (countdown <= 0) {
                    clearInterval(timer);
                    sendCodeBtn.disabled = false;
                    sendCodeBtn.textContent = '发送验证码';
                }
            }, 1000);

            //发送验证码请求
            $.ajax({
                url: "login/getCode",
                type: "post",
                data: {
                    email: email
                },

                success: function (result) {
                    let data = result.data;
                    if (data.status == 'fail') {
                        setShowNotification(data.msg);
                        return;
                    }
                    setShowNotification(`验证码已发送至 ${email}，请查收`);
                }
            })
        });

        // 表单提交处理
        document.getElementById('username-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 这里可以添加实际的登录逻辑
            $.ajax({
                url: 'login/byUP',
                type: 'post',
                data: {
                    username: username,
                    password: password
                },

                success: function(body) {
                    let data = body.data;
                    // 3. 处理响应
                    // 此处的 body 相当于响应的 user 对象.
                    if (data.status == "fail") {
                        setShowNotification(`请求发生了错误：` + data.msg);
                    } else {
                        localStorage.setItem("userId", data.msg);
                        // 登录成功!
                        // 跳转到客户端主页面 (聊天页面)
                        // 注意!! 当前尚未创建这个页面, 一会运行会出现 404
                        location.assign('/client_v2.html' + "?userId=" + data.msg);
                    }
                }
            });

        });

        document.getElementById('email-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const code = document.getElementById('verification-code').value;

            // 验证邮箱格式
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                setShowNotification('请输入有效的邮箱地址');
                return;
            }

            if (code == null) setShowNotification("验证码不能为空")

            // 这里可以添加实际的登录逻辑
            $.ajax({
                url: "login/email",
                type: 'post',
                data: {
                    email: email,
                    code: code
                },

                success: function (result) {
                    let data = result.data;
                    if (data.status == "fail") {
                        setShowNotification(data.msg);
                        return;
                    }
                    localStorage.setItem("userId", data.msg);
                    // 登录成功!
                    // 跳转到客户端主页面 (聊天页面)
                    // 注意!! 当前尚未创建这个页面, 一会运行会出现 404
                    location.assign('/client_v2.html' + "?userId=" + data.msg);
                }
            });
        });

        function setShowNotification(message, type = 'success') {
            $('#set-notificationText').text(message);
            $(`#set-notification`).removeClass().addClass('set-notification ' + type);
            $("#set-notification").addClass('show');
            setTimeout(function() {
                $('#set-notification').removeClass('show');
            }, 3000);
        }
    </script>
</body>
</html>